<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./iconcool.js"></script>
  <style>
    html,
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    .container {
      margin: 0 auto;
      padding: 50px;
      width: 980px;
    }
    .container .page-title {
      margin: 0;
      padding: 0;
    }
    .container .page-title .logo {
      height: 50px;
    }
    .tab-wrapper {
      padding-top: 26px;
      border-bottom: 1px solid #dcdee5;
      overflow: hidden;
    }
    .tab-wrapper .tab-panel {
      float: left;
      padding: 9px;
      min-width: 124px;
      font-size: 16px;
      color: #979ba5;
      text-align: center;
      cursor: pointer;
    }
    .tab-wrapper .tab-panel.active {
      color: #313238;
      border-bottom: 3px solid #361ec6;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    .icon-list .icon-item {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      color: #313238;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .icon-item .icon {
      display: inline-block;
      height: 92px;
      line-height: 92px;
      font-size: 44px;
    }
    .icon-list .icon-text {
      margin: 0;
      font-size: 14px;
      word-break: break-all;
    }
    .icon-list .colorful-icon {
      display: inline-block;
      margin-top: 20px;
      width: 116px;
      text-align: center;
      vertical-align: top;
      overflow: hidden;
      list-style: none;
    }
    .icon-list .colorful-icon .icon {
      display: block;
      margin: 0 auto;
      width: 1em;
      height: 92px;
      font-size: 44px;
    }
    .describe-title {
      margin: 60px 0 0;
      padding-bottom: 10px;
      font-size: 20px;
      font-weight: normal;
      color: #313238;
      border-bottom: 1px solid #dcdee5;
    }
    .use-describe {
      padding-left: 20px;
    }
    .use-describe li {
      margin-top: 20px;
      font-size: 14px;
      color: #313238;
      line-height: 20px;
    }
  </style>
  <title>Icon Cool</title>
</head>
<body>
  <div class="container">
    <h2 class="page-title">
      <img class="logo" src="">
    </h2>
    <div class="tab-wrapper">
      <div class="tab-panel active" data-type="singleColor">单色图标</div>
      <div class="tab-panel"  data-type="multipleColor">彩色图标</div>
    </div>
    <section class="tab-content single-color active" data-type="singleColor">
      <ul class="icon-list">
        <li class="icon-item" title="issue">
          <span class="icon stream-icon stream-issue"></span>
          <p class="icon-text">issue</p>
        </li>
        <li class="icon-item" title="docker">
          <span class="icon stream-icon stream-docker"></span>
          <p class="icon-text">docker</p>
        </li>
        <li class="icon-item" title="user">
          <span class="icon stream-icon stream-user"></span>
          <p class="icon-text">user</p>
        </li>
        <li class="icon-item" title="file">
          <span class="icon stream-icon stream-file"></span>
          <p class="icon-text">file</p>
        </li>
        <li class="icon-item" title="folder-open-shape">
          <span class="icon stream-icon stream-folder-open-shape"></span>
          <p class="icon-text">folder-open-shape</p>
        </li>
        <li class="icon-item" title="folder-shape">
          <span class="icon stream-icon stream-folder-shape"></span>
          <p class="icon-text">folder-shape</p>
        </li>
        <li class="icon-item" title="right-shape">
          <span class="icon stream-icon stream-right-shape"></span>
          <p class="icon-text">right-shape</p>
        </li>
        <li class="icon-item" title="github-logo">
          <span class="icon stream-icon stream-github-logo"></span>
          <p class="icon-text">github-logo</p>
        </li>
        <li class="icon-item" title="notify">
          <span class="icon stream-icon stream-notify"></span>
          <p class="icon-text">notify</p>
        </li>
        <li class="icon-item" title="open-api">
          <span class="icon stream-icon stream-open-api"></span>
          <p class="icon-text">open-api</p>
        </li>
        <li class="icon-item" title="1">
          <span class="icon stream-icon stream-1"></span>
          <p class="icon-text">1</p>
        </li>
        <li class="icon-item" title="2">
          <span class="icon stream-icon stream-2"></span>
          <p class="icon-text">2</p>
        </li>
        <li class="icon-item" title="4">
          <span class="icon stream-icon stream-4"></span>
          <p class="icon-text">4</p>
        </li>
        <li class="icon-item" title="3">
          <span class="icon stream-icon stream-3"></span>
          <p class="icon-text">3</p>
        </li>
        <li class="icon-item" title="add-small">
          <span class="icon stream-icon stream-add-small"></span>
          <p class="icon-text">add-small</p>
        </li>
        <li class="icon-item" title="all">
          <span class="icon stream-icon stream-all"></span>
          <p class="icon-text">all</p>
        </li>
        <li class="icon-item" title="5">
          <span class="icon stream-icon stream-5"></span>
          <p class="icon-text">5</p>
        </li>
        <li class="icon-item" title="angle-down-line">
          <span class="icon stream-icon stream-angle-down-line"></span>
          <p class="icon-text">angle-down-line</p>
        </li>
        <li class="icon-item" title="angle-up-line">
          <span class="icon stream-icon stream-angle-up-line"></span>
          <p class="icon-text">angle-up-line</p>
        </li>
        <li class="icon-item" title="build-canceled">
          <span class="icon stream-icon stream-build-canceled"></span>
          <p class="icon-text">build-canceled</p>
        </li>
        <li class="icon-item" title="build-failed">
          <span class="icon stream-icon stream-build-failed"></span>
          <p class="icon-text">build-failed</p>
        </li>
        <li class="icon-item" title="build-hooks">
          <span class="icon stream-icon stream-build-hooks"></span>
          <p class="icon-text">build-hooks</p>
        </li>
        <li class="icon-item" title="bookmark-o">
          <span class="icon stream-icon stream-bookmark-o"></span>
          <p class="icon-text">bookmark-o</p>
        </li>
        <li class="icon-item" title="build-sucess">
          <span class="icon stream-icon stream-build-sucess"></span>
          <p class="icon-text">build-sucess</p>
        </li>
        <li class="icon-item" title="build-waiting">
          <span class="icon stream-icon stream-build-waiting"></span>
          <p class="icon-text">build-waiting</p>
        </li>
        <li class="icon-item" title="build-warning">
          <span class="icon stream-icon stream-build-warning"></span>
          <p class="icon-text">build-warning</p>
        </li>
        <li class="icon-item" title="cc-cabinet">
          <span class="icon stream-icon stream-cc-cabinet"></span>
          <p class="icon-text">cc-cabinet</p>
        </li>
        <li class="icon-item" title="cc-jump-link">
          <span class="icon stream-icon stream-cc-jump-link"></span>
          <p class="icon-text">cc-jump-link</p>
        </li>
        <li class="icon-item" title="cc-plus">
          <span class="icon stream-icon stream-cc-plus"></span>
          <p class="icon-text">cc-plus</p>
        </li>
        <li class="icon-item" title="check-circle">
          <span class="icon stream-icon stream-check-circle"></span>
          <p class="icon-text">check-circle</p>
        </li>
        <li class="icon-item" title="check-small">
          <span class="icon stream-icon stream-check-small"></span>
          <p class="icon-text">check-small</p>
        </li>
        <li class="icon-item" title="clock">
          <span class="icon stream-icon stream-clock"></span>
          <p class="icon-text">clock</p>
        </li>
        <li class="icon-item" title="close-circle">
          <span class="icon stream-icon stream-close-circle"></span>
          <p class="icon-text">close-circle</p>
        </li>
        <li class="icon-item" title="close-small">
          <span class="icon stream-icon stream-close-small"></span>
          <p class="icon-text">close-small</p>
        </li>
        <li class="icon-item" title="commit">
          <span class="icon stream-icon stream-commit"></span>
          <p class="icon-text">commit</p>
        </li>
        <li class="icon-item" title="date">
          <span class="icon stream-icon stream-date"></span>
          <p class="icon-text">date</p>
        </li>
        <li class="icon-item" title="edit">
          <span class="icon stream-icon stream-edit"></span>
          <p class="icon-text">edit</p>
        </li>
        <li class="icon-item" title="devops">
          <span class="icon stream-icon stream-devops"></span>
          <p class="icon-text">devops</p>
        </li>
        <li class="icon-item" title="export-ci">
          <span class="icon stream-icon stream-export-ci"></span>
          <p class="icon-text">export-ci</p>
        </li>
        <li class="icon-item" title="flag">
          <span class="icon stream-icon stream-flag"></span>
          <p class="icon-text">flag</p>
        </li>
        <li class="icon-item" title="git">
          <span class="icon stream-icon stream-git"></span>
          <p class="icon-text">git</p>
        </li>
        <li class="icon-item" title="helper">
          <span class="icon stream-icon stream-helper"></span>
          <p class="icon-text">helper</p>
        </li>
        <li class="icon-item" title="loading">
          <span class="icon stream-icon stream-loading"></span>
          <p class="icon-text">loading</p>
        </li>
        <li class="icon-item" title="lock">
          <span class="icon stream-icon stream-lock"></span>
          <p class="icon-text">lock</p>
        </li>
        <li class="icon-item" title="manual">
          <span class="icon stream-icon stream-manual"></span>
          <p class="icon-text">manual</p>
        </li>
        <li class="icon-item" title="merge">
          <span class="icon stream-icon stream-merge"></span>
          <p class="icon-text">merge</p>
        </li>
        <li class="icon-item" title="message">
          <span class="icon stream-icon stream-message"></span>
          <p class="icon-text">message</p>
        </li>
        <li class="icon-item" title="notify">
          <span class="icon stream-icon stream-notify"></span>
          <p class="icon-text">notify</p>
        </li>
        <li class="icon-item" title="pipeline">
          <span class="icon stream-icon stream-pipeline"></span>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="icon-item" title="quality-check-fail">
          <span class="icon stream-icon stream-quality-check-fail"></span>
          <p class="icon-text">quality-check-fail</p>
        </li>
        <li class="icon-item" title="pr">
          <span class="icon stream-icon stream-pr"></span>
          <p class="icon-text">pr</p>
        </li>
        <li class="icon-item" title="return-small">
          <span class="icon stream-icon stream-return-small"></span>
          <p class="icon-text">return-small</p>
        </li>
        <li class="icon-item" title="review-abort">
          <span class="icon stream-icon stream-review-abort"></span>
          <p class="icon-text">review-abort</p>
        </li>
        <li class="icon-item" title="review-auto">
          <span class="icon stream-icon stream-review-auto"></span>
          <p class="icon-text">review-auto</p>
        </li>
        <li class="icon-item" title="review-auto-gray">
          <span class="icon stream-icon stream-review-auto-gray"></span>
          <p class="icon-text">review-auto-gray</p>
        </li>
        <li class="icon-item" title="review-auto-pass">
          <span class="icon stream-icon stream-review-auto-pass"></span>
          <p class="icon-text">review-auto-pass</p>
        </li>
        <li class="icon-item" title="reviewed">
          <span class="icon stream-icon stream-reviewed"></span>
          <p class="icon-text">reviewed</p>
        </li>
        <li class="icon-item" title="review-enable">
          <span class="icon stream-icon stream-review-enable"></span>
          <p class="icon-text">review-enable</p>
        </li>
        <li class="icon-item" title="review-error">
          <span class="icon stream-icon stream-review-error"></span>
          <p class="icon-text">review-error</p>
        </li>
        <li class="icon-item" title="search">
          <span class="icon stream-icon stream-search"></span>
          <p class="icon-text">search</p>
        </li>
        <li class="icon-item" title="review-waiting">
          <span class="icon stream-icon stream-review-waiting"></span>
          <p class="icon-text">review-waiting</p>
        </li>
        <li class="icon-item" title="setting">
          <span class="icon stream-icon stream-setting"></span>
          <p class="icon-text">setting</p>
        </li>
        <li class="icon-item" title="source-branch">
          <span class="icon stream-icon stream-source-branch"></span>
          <p class="icon-text">source-branch</p>
        </li>
        <li class="icon-item" title="tag">
          <span class="icon stream-icon stream-tag"></span>
          <p class="icon-text">tag</p>
        </li>
        <li class="icon-item" title="user">
          <span class="icon stream-icon stream-user"></span>
          <p class="icon-text">user</p>
        </li>
        <li class="icon-item" title="user-o">
          <span class="icon stream-icon stream-user-o"></span>
          <p class="icon-text">user-o</p>
        </li>
        <li class="icon-item" title="warning-circle">
          <span class="icon stream-icon stream-warning-circle"></span>
          <p class="icon-text">warning-circle</p>
        </li>
        <li class="icon-item" title="well">
          <span class="icon stream-icon stream-well"></span>
          <p class="icon-text">well</p>
        </li>
        <li class="icon-item" title="clock_fill">
          <span class="icon stream-icon stream-clock_fill"></span>
          <p class="icon-text">clock_fill</p>
        </li>
        <li class="icon-item" title="current-status">
          <span class="icon stream-icon stream-current-status"></span>
          <p class="icon-text">current-status</p>
        </li>
        <li class="icon-item" title="not-start">
          <span class="icon stream-icon stream-not-start"></span>
          <p class="icon-text">not-start</p>
        </li>
        <li class="icon-item" title="quality-check-wait">
          <span class="icon stream-icon stream-quality-check-wait"></span>
          <p class="icon-text">quality-check-wait</p>
        </li>
        <li class="icon-item" title="review-auto-4">
          <span class="icon stream-icon stream-review-auto-4"></span>
          <p class="icon-text">review-auto-4</p>
        </li>
        <li class="icon-item" title="review-abort-2">
          <span class="icon stream-icon stream-review-abort-2"></span>
          <p class="icon-text">review-abort-2</p>
        </li>
        <li class="icon-item" title="review-enable-2">
          <span class="icon stream-icon stream-review-enable-2"></span>
          <p class="icon-text">review-enable-2</p>
        </li>
        <li class="icon-item" title="reviewed-2">
          <span class="icon stream-icon stream-reviewed-2"></span>
          <p class="icon-text">reviewed-2</p>
        </li>
        <li class="icon-item" title="reviewing-2">
          <span class="icon stream-icon stream-reviewing-2"></span>
          <p class="icon-text">reviewing-2</p>
        </li>
        <li class="icon-item" title="check-fill">
          <span class="icon stream-icon stream-check-fill"></span>
          <p class="icon-text">check-fill</p>
        </li>
        <li class="icon-item" title="error-fill">
          <span class="icon stream-icon stream-error-fill"></span>
          <p class="icon-text">error-fill</p>
        </li>
        <li class="icon-item" title="waiting-fill">
          <span class="icon stream-icon stream-waiting-fill"></span>
          <p class="icon-text">waiting-fill</p>
        </li>
        <li class="icon-item" title="reviewing">
          <span class="icon stream-icon stream-reviewing"></span>
          <p class="icon-text">reviewing</p>
        </li>
        <li class="icon-item" title="comment">
          <span class="icon stream-icon stream-comment"></span>
          <p class="icon-text">comment</p>
        </li>
        <li class="icon-item" title="code-review">
          <span class="icon stream-icon stream-code-review"></span>
          <p class="icon-text">code-review</p>
        </li>
        <li class="icon-item" title="hourglass">
          <span class="icon stream-icon stream-hourglass"></span>
          <p class="icon-text">hourglass</p>
        </li>
        <li class="icon-item" title="metric-link">
          <span class="icon stream-icon stream-metric-link"></span>
          <p class="icon-text">metric-link</p>
        </li>
        <li class="icon-item" title="setting-link">
          <span class="icon stream-icon stream-setting-link"></span>
          <p class="icon-text">setting-link</p>
        </li>
        <li class="icon-item" title="pipeline-link">
          <span class="icon stream-icon stream-pipeline-link"></span>
          <p class="icon-text">pipeline-link</p>
        </li>
        <li class="icon-item" title="locale">
          <span class="icon stream-icon stream-locale"></span>
          <p class="icon-text">locale</p>
        </li>
        <li class="icon-item" title="login-bottom">
          <span class="icon stream-icon stream-login-bottom"></span>
          <p class="icon-text">login-bottom</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
        <li>弹性，在网页或者 app 上，展示字体是很便捷的。用字体图标可以很方便的改变 icon 的颜色，或者加入一些其他的效果</li>
        <li>可缩放，可以很方便的改变图标的大小</li>
        <li>矢量，字体图标是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊</li>
        <li>节省加载时间，字体图标很小，每个小图标只有几 kb，大大节省了加载时间</li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将整个目录复制到您的项目里</li>
        <li>引入 style.css</li>
        <li>挑选相应图标并获取类名，如 .bk-icon .icon-demo</li>
      </ul>
    </section>
    <section class="tab-content multiple-color"  data-type="multipleColor">
      <ul class="icon-list">
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-issue"></use>
          </svg>
          <p class="icon-text">issue</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-docker"></use>
          </svg>
          <p class="icon-text">docker</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-user"></use>
          </svg>
          <p class="icon-text">user</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-file"></use>
          </svg>
          <p class="icon-text">file</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-folder-open-shape"></use>
          </svg>
          <p class="icon-text">folder-open-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-folder-shape"></use>
          </svg>
          <p class="icon-text">folder-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-right-shape"></use>
          </svg>
          <p class="icon-text">right-shape</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-github-logo"></use>
          </svg>
          <p class="icon-text">github-logo</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-notify"></use>
          </svg>
          <p class="icon-text">notify</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-open-api"></use>
          </svg>
          <p class="icon-text">open-api</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-1"></use>
          </svg>
          <p class="icon-text">1</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-2"></use>
          </svg>
          <p class="icon-text">2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-4"></use>
          </svg>
          <p class="icon-text">4</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-3"></use>
          </svg>
          <p class="icon-text">3</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-add-small"></use>
          </svg>
          <p class="icon-text">add-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-all"></use>
          </svg>
          <p class="icon-text">all</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-5"></use>
          </svg>
          <p class="icon-text">5</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-angle-down-line"></use>
          </svg>
          <p class="icon-text">angle-down-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-angle-up-line"></use>
          </svg>
          <p class="icon-text">angle-up-line</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-canceled"></use>
          </svg>
          <p class="icon-text">build-canceled</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-failed"></use>
          </svg>
          <p class="icon-text">build-failed</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-hooks"></use>
          </svg>
          <p class="icon-text">build-hooks</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-bookmark-o"></use>
          </svg>
          <p class="icon-text">bookmark-o</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-sucess"></use>
          </svg>
          <p class="icon-text">build-sucess</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-waiting"></use>
          </svg>
          <p class="icon-text">build-waiting</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-build-warning"></use>
          </svg>
          <p class="icon-text">build-warning</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-cc-cabinet"></use>
          </svg>
          <p class="icon-text">cc-cabinet</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-cc-jump-link"></use>
          </svg>
          <p class="icon-text">cc-jump-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-cc-plus"></use>
          </svg>
          <p class="icon-text">cc-plus</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-check-circle"></use>
          </svg>
          <p class="icon-text">check-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-check-small"></use>
          </svg>
          <p class="icon-text">check-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-clock"></use>
          </svg>
          <p class="icon-text">clock</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-close-circle"></use>
          </svg>
          <p class="icon-text">close-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-close-small"></use>
          </svg>
          <p class="icon-text">close-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-commit"></use>
          </svg>
          <p class="icon-text">commit</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-date"></use>
          </svg>
          <p class="icon-text">date</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-edit"></use>
          </svg>
          <p class="icon-text">edit</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-devops"></use>
          </svg>
          <p class="icon-text">devops</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-export-ci"></use>
          </svg>
          <p class="icon-text">export-ci</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-flag"></use>
          </svg>
          <p class="icon-text">flag</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-git"></use>
          </svg>
          <p class="icon-text">git</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-helper"></use>
          </svg>
          <p class="icon-text">helper</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-loading"></use>
          </svg>
          <p class="icon-text">loading</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-lock"></use>
          </svg>
          <p class="icon-text">lock</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-manual"></use>
          </svg>
          <p class="icon-text">manual</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-merge"></use>
          </svg>
          <p class="icon-text">merge</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-message"></use>
          </svg>
          <p class="icon-text">message</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-notify"></use>
          </svg>
          <p class="icon-text">notify</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-pipeline"></use>
          </svg>
          <p class="icon-text">pipeline</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-quality-check-fail"></use>
          </svg>
          <p class="icon-text">quality-check-fail</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-pr"></use>
          </svg>
          <p class="icon-text">pr</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-return-small"></use>
          </svg>
          <p class="icon-text">return-small</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-abort"></use>
          </svg>
          <p class="icon-text">review-abort</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-auto"></use>
          </svg>
          <p class="icon-text">review-auto</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-auto-gray"></use>
          </svg>
          <p class="icon-text">review-auto-gray</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-auto-pass"></use>
          </svg>
          <p class="icon-text">review-auto-pass</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-reviewed"></use>
          </svg>
          <p class="icon-text">reviewed</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-enable"></use>
          </svg>
          <p class="icon-text">review-enable</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-error"></use>
          </svg>
          <p class="icon-text">review-error</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-search"></use>
          </svg>
          <p class="icon-text">search</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-waiting"></use>
          </svg>
          <p class="icon-text">review-waiting</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-setting"></use>
          </svg>
          <p class="icon-text">setting</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-source-branch"></use>
          </svg>
          <p class="icon-text">source-branch</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-tag"></use>
          </svg>
          <p class="icon-text">tag</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-user"></use>
          </svg>
          <p class="icon-text">user</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-user-o"></use>
          </svg>
          <p class="icon-text">user-o</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-warning-circle"></use>
          </svg>
          <p class="icon-text">warning-circle</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-well"></use>
          </svg>
          <p class="icon-text">well</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-clock_fill"></use>
          </svg>
          <p class="icon-text">clock_fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-current-status"></use>
          </svg>
          <p class="icon-text">current-status</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-not-start"></use>
          </svg>
          <p class="icon-text">not-start</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-quality-check-wait"></use>
          </svg>
          <p class="icon-text">quality-check-wait</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-auto-4"></use>
          </svg>
          <p class="icon-text">review-auto-4</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-abort-2"></use>
          </svg>
          <p class="icon-text">review-abort-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-review-enable-2"></use>
          </svg>
          <p class="icon-text">review-enable-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-reviewed-2"></use>
          </svg>
          <p class="icon-text">reviewed-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-reviewing-2"></use>
          </svg>
          <p class="icon-text">reviewing-2</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-check-fill"></use>
          </svg>
          <p class="icon-text">check-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-error-fill"></use>
          </svg>
          <p class="icon-text">error-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-waiting-fill"></use>
          </svg>
          <p class="icon-text">waiting-fill</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-reviewing"></use>
          </svg>
          <p class="icon-text">reviewing</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-comment"></use>
          </svg>
          <p class="icon-text">comment</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-code-review"></use>
          </svg>
          <p class="icon-text">code-review</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-hourglass"></use>
          </svg>
          <p class="icon-text">hourglass</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-metric-link"></use>
          </svg>
          <p class="icon-text">metric-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-setting-link"></use>
          </svg>
          <p class="icon-text">setting-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-pipeline-link"></use>
          </svg>
          <p class="icon-text">pipeline-link</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-locale"></use>
          </svg>
          <p class="icon-text">locale</p>
        </li>
        <li class="colorful-icon">
          <svg class="icon svg-icon">
            <use xlink:href="#stream-login-bottom"></use>
          </svg>
          <p class="icon-text">login-bottom</p>
        </li>
      </ul>
      <h3 class="describe-title">为什么使用</h3>
      <ul class="use-describe">
          <li>支持彩色图标</li>
          <li>跨 SVG 使用，使用 use 可调用文档中加载的所有 SVG 图标 </li>
      </ul>
      <h3 class="describe-title">如何使用</h3>
      <ul class="use-describe">
        <li>将下载的资源文件中 iconcool.js 文件外部资源通过 script 标签引入</li>
        <li>在 html 模板文件中挑选对应的对应图标的名称使用，例如：
          <pre>
    &lt;svg aria-hidden="true"&gt;
      &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
    &lt;/svg&gt;
          </pre>
        </li>
      </ul>
      </section>
    </section>
  </div>
  <script>
    document.addEventListener('click', function (e) {
      if (event.target.classList.contains('tab-panel')) {
        const type = event.target.dataset.type
        const tabPanels = document.querySelectorAll('.tab-panel')
        const tabContents = document.querySelectorAll('.tab-content')

        tabPanels.forEach(function(item) {
          item.classList.remove('active')
        })

        e.target.classList.add('active')
        
        tabContents.forEach(function (item) {
          const contentType = item.dataset.type
          if (contentType === type) {
            item.classList.add('active')
          } else {
            item.classList.remove('active')
          }
        })
      }
      
    })
  </script>
</body>
</html>